<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<link href="../static/dp/css/animate.min.css" th:href="@{/dp/css/animate.min.css}" rel="stylesheet"/>
	<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
	<th:block th:include="include :: header('首页')" />
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
	<div class="row">
		<div class="col-sm-3">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<span class="label label-success pull-right">总数</span>
					<h5>上报事件</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins" style="text-align:center;" id="data1"></h1>
				</div>
			</div>
		</div>
		<div class="col-sm-3">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<span class="label label-danger pull-right">总数</span>
					<h5>综合智治平台</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins" style="text-align:center;" id="data2"></h1>
				</div>
			</div>
		</div>
		<div class="col-sm-3">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<span class="label label-primary pull-right">总数</span>
					<h5>12345平台</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins" style="text-align:center;" id="data3"></h1>
				</div>
			</div>
		</div>
		<div class="col-sm-3">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<span class="label label-info pull-right">总数</span>
					<h5>检索事件</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins" style="text-align:center;" id="data4"></h1>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12">
			<div class="ibox-title">
				<h5>上报事件</h5>
				<div class="pull-right">
					<div class="btn-group">
						<button type="button" class="btn btn-xs btn-white">日</button>
						<button type="button" class="btn btn-xs btn-white active">月</button>
						<button type="button" class="btn btn-xs btn-white">年</button>
					</div>
				</div>
			</div>
			<div id="echartsEvt"></div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12">
			<div class="ibox-title">
				<h5>检索事件</h5>
				<div class="pull-right">
					<div class="btn-group">
						<button type="button" class="btn btn-xs btn-white">日</button>
						<button type="button" class="btn btn-xs btn-white active">月</button>
						<button type="button" class="btn btn-xs btn-white">年</button>
					</div>
				</div>
			</div>
			<div id="echartsSearchResult"></div>
		</div>
	</div>
</div>
<th:block th:include="include :: footer" />
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/echarts/echarts.js}"></script>
<script type="text/javascript">
	var prefix = ctx;

	$(document).ready(function () {
		getData();
		initEchartsEvt();
		initEchartsSearchResult();
	});
	function getData(){
		$.ajax({
			type: "post",
			url: "/largeScreen/selectEvtCountAll",
			dataType: "json",
			success: function (data) {
				$("#data1").text(data[3].value);
				$("#data2").text(data[11].value);
				$("#data3").text(data[15].value);
				$("#data4").text(data[7].value);
			}
		})
	}
	//evt charts
	var chartEvt;
	function initEchartsEvt() {
		chartEvt = echarts.init(document.getElementById('echartsEvt'), null, {
		});

		chartEvt.resize({
			height: 300
		});

		var labelOption = {
			normal: {
				show: false,
				position: 'insideBottom',
				rotate: 90,
				textStyle: {
					align: 'left',
					verticalAlign: 'middle'
				}
			}
		};

		option = {
			// color: ['#003366', '#006699', '#4cabce', '#e5323e'],
			legend: {},
			tooltip: {
				trigger: 'axis',
				axisPointer: {            // 坐标轴指示器，坐标轴触发有效
					type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			toolbox: {
				show: true,
				orient: 'vertical',
				left: 'right',
				top: 'center',
				feature: {
					mark: {show: true},
					dataView: {show: true, readOnly: false},
					magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
					restore: {show: true},
					saveAsImage: {show: true}
				}
			},
			calculable: true,
			xAxis: { type: 'category' },
			yAxis: {}
		}

		chartEvt.setOption(option);
		selectEchartsEvtDataset("evt_type", "month");
	}

	function selectEchartsEvtDataset(type, period){
		$.ajax({
			url: "/selectEchartsEvtDataset",
			type: "post",
			dataType: "json",
			data: {
				type: type,
				period: period
			},
			success: function(result) {
				console.log("search_result result....");
				console.log(result);
				chartEvt.setOption({dataset: result.dataset, series: result.series});
			},
			error: function (err) {
				console.log(err);
			}
		});
	}

	//search result charts
	var chartSearchResult;
	function initEchartsSearchResult() {
		chartSearchResult = echarts.init(document.getElementById('echartsSearchResult'), null, {
		});

		chartSearchResult.resize({
			height: 300
		});

		var labelOption = {
			normal: {
				show: false,
				position: 'insideBottom',
				rotate: 90,
				textStyle: {
					align: 'left',
					verticalAlign: 'middle'
				}
			}
		};

		option = {
			// color: ['#003366', '#006699', '#4cabce', '#e5323e'],
			legend: {},
			tooltip: {
				trigger: 'axis',
				axisPointer: {            // 坐标轴指示器，坐标轴触发有效
					type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			toolbox: {
				show: true,
				orient: 'vertical',
				left: 'right',
				top: 'center',
				feature: {
					mark: {show: true},
					dataView: {show: true, readOnly: false},
					magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
					restore: {show: true},
					saveAsImage: {show: true}
				}
			},
			calculable: true,
			xAxis: { type: 'category' },
			yAxis: {}
		}

		chartSearchResult.setOption(option);
		selectEchartsSearchResultDataset("rule_name", "month");
	}

	function selectEchartsSearchResultDataset(type, period){
		$.ajax({
			url: "/selectEchartsSearchResultDataset",
			type: "post",
			dataType: "json",
			data: {
				type: type,
				period: period
			},
			success: function(result) {
				console.log("evt result....");
				console.log(result);
				chartSearchResult.setOption({dataset: result.dataset, series: result.series});
			},
			error: function (err) {
				console.log(err);
			}
		});
	}
</script>
</body>
</html>
